<template>
  <div>
    <van-nav-bar :fixed="true" placeholder>
      <template #left>
        <img class="logo" src="../../assets/img.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" />
      </template>
    </van-nav-bar>
    <van-tabs
    v-model="active"
    animated
    sticky
    offset-top="1.22666667rem"
    >
      <van-tab
      v-for="obj in userChannelList"
      :key="obj.id"
      :name="obj.id"
      :title="obj.name">
        <article-list :channelId="active"></article-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannelListAPI } from '@/api'
import ArticleList from './ArticleList.vue'
export default {
  data () {
    return {
      active: 2,
      userChannelList: []
    }
  },
  async created () {
    const res = await getUserChannelListAPI()
    this.userChannelList = res.data.data.channels
  },
  components: {
    ArticleList
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
</style>
